<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/cart.js"></script>
    <style>
        .goods-num {
            width: 30px;
            height: 25px;
        }
    </style>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>商品名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
            </tr>
        </thead>
        <tbody id="tbody">
            
        </tbody>
    </table>
    <script>
        //获取数据，来自cart.js
        let data= xhrData.data.cartModels;
        //商品的内容，总计的内容，合并
        let goodsTr='',totalTr='',trTxt='';
        //总数量，总价格
        let totalNumber=0,totalPrice=0;
        //商品循环
        for(let i=0;i<data.length;i++){
            let numInput = document.createElement('input');
            numInput.value= data[i].num;
            numInput.classList.add('goods-num');
            
            goodsTr += `
                <tr>
                    <td>${data[i].name}</td>
                    <td class="price">${data[i].price.toFixed(2)}</td>
                    <td><input type="text"  class="goods-num" data-index=${i} value=${data[i].num}></td>
                    <td class="sum">${data[i].sum.toFixed(2)}</td>
                </tr>
                `;
            //计算总价格和总数量
            totalNumber += data[i].num;
            totalPrice += data[i].sum;
        }
        //总计一行
        totalTr=`<tr>
                <td colspan=2>总计</td>
                <td class="total-num">${totalNumber}</td>
                <td class="total-price">${totalPrice.toFixed(2)}</td>
            </tr>`
        trTxt = goodsTr+totalTr;
        //let tbody=document.getElementById('tbody');
        tbody.innerHTML=trTxt;
        //修改商品的数量
        let goodsNum=document.querySelectorAll('.goods-num');
        //小计
        let sum=document.querySelectorAll('.sum');
        //单价
        let price=document.querySelectorAll('.price');
        for (let i=0;i<goodsNum.length;i++){
            goodsNum[i].onchange = function(e){    //改变了值-onchenge
                console.log(this.value);
                //当前商品的索引
                let trIndex= parseInt(this.getAttribute('data-index'));//通过属性名获取值,原生js的方法
                //单价
                let priceVal=price[trIndex].innerText;//td没有value，只能获取页面文本
                //更新商品的小计
                sum[trIndex].innerHTML=(priceVal*this.value).toFixed(2);
                let totalNum=0,totalPrice=0;
                for (let i=0;i<data.length;i++){
                    totalNum+=goodsNum[i].value/1;
                    totalPrice += goodsNum[i].value*price[i].innerText;
                }
                let totalNumEl=document.querySelector('.total-num');//只有一个元素可以不用all，可能会失灵
                totalNumEl.innerHTML=totalNum;
                let totalpriceEl=document.querySelector('.total-price');
                totalpriceEl.innerText=totalPrice;
                console.log(totalNum,totalPrice);
            }

        }
    </script>
</body>
</html>